<script setup lang="ts">

defineProps({
    title: {
        type: String,
        default: '标题'
    },
    createTime: {
        type: String,
        default: '2025-01-01 12:00:00'
    }
})

const getAvatarColor = (title: string) => {
    let hash = 0;
    for (let i = 0; i < title.length; i++) {
        hash = title.charCodeAt(i) + ((hash << 5) - hash);
    }
    const hue = Math.abs(hash) % 360;
    return `hsl(${hue}, 70%, 60%)`;
}

</script>

<template>
    <el-row style="margin: 10px 0 10px 0">
        <el-avatar :size="55" style="font-size: 30px; line-height: 50px;" :style="{ backgroundColor: getAvatarColor(title) }">
            {{title.charAt(0)}}
        </el-avatar>
        <el-space alignment="center" direction="vertical" style="padding-left: 10px; height: 55px; align-items: start">
            <span style="font-size: 20px">{{ title }}</span>
            <span style="font-size: 12px" class="time">{{ createTime }}</span>
        </el-space>
    </el-row>
</template>

<style scoped lang="css">
.time {
    color: var(--el-text-color-secondary);
}
</style>